<template>
  <div class="search no-drag">
    <a-input v-model:value="searchStr"
             placeholder="搜索">
      <template #prefix>
        <SearchOutlined class="icon-search" />
      </template>
    </a-input>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue"
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
  components: {
    SearchOutlined
  },
  setup() {
    const { searchStr } = toRefs(reactive({
      searchStr: ''
    }))
    return {
      searchStr
    }
  }
}
</script>

<style lang='scss' scoped >
.search {
  .ant-input-affix-wrapper {
    background-color: rgba(0, 0, 0, 0.06);
    width: 160px;
    height: 32px;
    border-radius: 16px;
    border: none;
    ::v-deep input {
      background-color: transparent;
      color: #fff;
    }
    ::v-deep .ant-input-prefix {
      color: rgba(255, 255, 255, 0.4);
      margin-left: 10px;
      font-size: 14px;
    }
  }
}
</style>